import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
import { App } from 'vue-demi'

export default {
  install (app: App<Element>) {
    // 定义全局指令
    // 注意：调用的使用通过  v-lazy="xxx"
    app.directive('lazy', {
      // 指令所在的元素，dom结构被解析完成
      // 图片懒加载核心：图片标签进入到可视区，就把 src 的值设置为真实图片地址
      mounted (el, { value }) {
        // console.log({ el, value })
        const { stop } = useIntersectionObserver(
          // 被检测的目标元素，可以是组件，也可以是DOM元素
          el,
          ([{ isIntersecting }]) => {
            // 如果元素可见
            if (isIntersecting) {
              // 设置图片的 src 为真实图片地址
              el.src = value
              // 如果图片加载失败，设置默认图片
              el.onerror = () => {
                el.src = defaultImg
              }
              // 停止检测
              stop()
            }
          }
        )
      }
    })
  }
}
